<template>
  <div class="app-container" v-loading="loading">
    <!-- 添加或修改菜谱对话框 -->

    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="el-form"
    >
      <div class="disp-from-flxe">
        <el-form-item label="学校" prop="schoolId">
          <el-select v-model="form.schoolId" filterable>
            <el-option
              v-for="(item, index) in schoolArr"
              :key="index"
              :label="item.deptName"
              :value="item.deptId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" prop="userId">
          <el-select v-model="form.userId" filterable>
            <el-option
              v-for="(item, index) in entArr"
              :key="index"
              :label="item.deptName"
              :value="item.deptId"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="disp-from-flxe">
        <el-form-item label="配送时间" prop="sendTime">
          <el-date-picker
            v-model="form.sendTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="采购金额" prop="money">
          <el-input-number
            v-model="form.money"
            :min="0"
            :precision="2"
            @change="cheNumMoney"
          ></el-input-number>
        </el-form-item>
      </div>

      <div class="disp-from-flxe">
        <el-form-item label="材料清单">
          <el-table border :data="form.params.details">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="50"
            />

            <el-table-column label="名称" align="center" width="200">
              <template slot-scope="scope">
                <el-select
                  filterable
                  @change="(e) => chType(e, scope.$index)"
                  v-model="scope.row.typeId"
                >
                  <el-option
                    v-for="item in typeArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="规格" align="center" width="200">
              <template slot-scope="scope">
                <el-select filterable v-model="scope.row.specId">
                  <el-option
                    v-for="item in specArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" width="200">
              <template slot-scope="scope">
                <el-select filterable v-model="scope.row.brandId">
                  <el-option
                    v-for="item in brandArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column label="采购数量" align="center" width="200">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.num"
                  :min="0"
                  @change="(e) => cheNum(e, scope)"
                />
              </template>
            </el-table-column>

            <el-table-column label="采购价格" align="center" width="200">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.price"
                  :min="0"
                  :precision="2"
                  @change="(e) => cheNum(e, scope)"
                />
              </template>
            </el-table-column>
            <el-table-column label="已收数量" align="center" width="200">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.shouNum"
                  :min="0"
                  @change="(e) => cheNum(e, scope)"
                />
              </template>
            </el-table-column>
            <el-table-column label="未收数量" align="center" width="200">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.weiNum"
                  :min="0"
                  @change="(e) => cheNum(e, scope)"
                />
              </template>
            </el-table-column>
            <el-table-column label="收货均价" align="center" width="200">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.jMoney"
                  :min="0"
                  :precision="2"
                  @change="(e) => cheNum(e, scope)"
                />
              </template>
            </el-table-column>
            <el-table-column label="收货金额-" align="center" width="200">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.money"
                  :min="0"
                  :precision="2"
                  @change="(e) => cheNum(e, scope)"
                />
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" width="200">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remark"
                  :min="0"
                  @change="(e) => cheNum(e, scope)"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              class-name="small-padding fixed-width"
              width="200"
            >
              <template slot-scope="scope">
                <el-button
                  v-show="scope.$index + 1 == form.params.details.length"
                  size="mini"
                  type="text"
                  icon="el-icon-plus"
                  @click="addParams(scope)"
                  >添加</el-button
                >
                <el-button
                  v-show="form.params.details.length > 1"
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="delParams(scope)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>
    
    <script>
import { listUser } from "@/api/system/user";
import { listDept } from "@/api/system/dept";
import { getDeliveryInfo, addDelivery, editDelivery } from "@/api/system/procure";
import { getFormaType } from "@/api/system/type";

import { getFormatbrandData } from "@/api/system/brand";
// import { getFormatCateData } from "@/api/system/cate";
import { getFormatSpecData } from "@/api/system/specifications";
export default {
  name: "addMenu",
  props: {
    mId: {
      type: String,
      default: 0,
    },
  },
  data() {
    return {
      loading: true,
      typeArr: [], //类型
      brandArr: [], //单位
      specArr: [], //规格
      schoolArr: [], //学校
      entArr: [], //供应商
      caseArrs: [
        { val: 0, lab: "小学" },
        { val: 1, lab: "初中" },
      ],
      // 表单参数
      form: {
        id: undefined,
        schoolId: undefined,
        userId: undefined,
        sendTime: undefined,
        money: 0,
        params: {
          details: [
            // {
            //   typeId: undefined, //分类id
            //   specId: undefined, //规格id
            //   brandId: undefined, //单位id
            //   price: undefined, //单价
            //   num: undefined, //数量
            //   money: 0, //总价
            //   id: undefined,
            // },
          ],
        },
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        cate: [
          {
            required: true,
            message: "请选择类型",
            trigger: ["blur", "change"],
          },
        ],
        // param
      },
    };
  },
  created() {
    this.show();
    this.form = {
        id: undefined,
        schoolId: undefined,
        userId: undefined,
        sendTime: undefined,
        money: 0,
        params: {
          details: [
            // {
            //   typeId: undefined, //分类id
            //   specId: undefined, //规格id
            //   brandId: undefined, //单位id
            //   price: undefined, //单价
            //   num: undefined, //数量
            //   money: 0, //总价
            //   id: undefined,
            // },
          ]
        }
      }
    // console.log(this.mId)
    // console.log('this.mId')
    // console.log(this.mId)
  },
  methods: {
    cheNumMoney(e) {
      if (e == undefined) {
        e = 0.0;
        this.form.money = 0.0;
        // console.log(this.form.money)
        this.$forceUpdate();
        // form.money
      }
    },
    chType(e, scope) {
      console.log(e);
      console.log(scope);
    },
    cheNum(e, scope) {
      if (e == undefined) {
        scope.row.num = 0;
      }
    },
    show() {
      //供应商
      listDept({ pageNum: -1, pageSize: -1, type: 0, parentId: 1000002 }).then(
        (response) => {
          this.entArr = response.rows;
        }
      );
      //学校
      listDept({ pageNum: -1, pageSize: -1, type: 1, parentId: 1000003 }).then(
        (response) => {
          this.schoolArr = response.rows;
        }
      );

      //单位
      getFormatbrandData({ pageNum: -1, pageSize: -1 }).then((response) => {
        this.brandArr = response.rows;
      });

      //规格
      getFormatSpecData({ pageNum: -1, pageSize: -1 }).then((response) => {
        this.specArr = response.rows;
        // console.log(this.getFormatSpecData);
      });

      //类型
      getFormaType({ pageNum: -1, pageSize: -1 }).then((response) => {
        // this
        this.typeArr = response.rows;
        this.loading = false;
        if (this.mId == 0) {
          console.log(this.typeArr[0]);
          console.log(this.typeArr[0].specId);
          console.log(this.typeArr[0].brandId);
          this.form.params.details.push({
            typeId: this.typeArr[0].id, //分类id
            specId: this.typeArr[0].specId, //规格id
            brandId: this.typeArr[0].brandId, //单位id
            price: 0, //单价
            num: 0, //采购数量
            money: 0, //总价
            remark: undefined, //备注
            jMoney: 0, //收货均价
            shouNum: 0, //已收数量
            weiNum: 0, //未收货数量
            id: undefined,
          });
          //   this.form.params.details[0].typeId = this.typeArr[0].id;
          //   this.form.params.details[0].brandId = this.brandArr[0].id;
          //   this.form.params.details[0].specId = this.specArr[0].id;
        }
      });
      if (this.mId != 0) {
        getDeliveryInfo(this.mId).then((response) => {
          var res = response.data;
          this.form = {
            id: res.id,
            schoolId: res.schoolId,
            userId: res.userId,
            sendTime: res.sendTime,
            money: res.money,
            params: {
              details: res.details,
            },
          };
        });
      }
    },
    delParams(scope) {
      //   console.log(scope);
      this.form.params.details.splice(scope.$index, 1);
    },
    addParams(scope) {
      this.form.params.details.push({
        typeId: this.typeArr[0].id, //分类id
        specId: this.typeArr[0].specId, //规格id
        brandId: this.typeArr[0].brandId, //单位id
        price: 0, //单价
        num: 0, //采购数量
        money: 0, //总价
        remark: undefined, //备注
        jMoney: 0, //收货均价
        shouNum: 0, //已收数量
        weiNum: 0, //未收货数量
        id: undefined,
      });
      //   console.log(scope);
    },
    cancel() {
      this.$emit("cancel");
    },
    /** 提交按钮 */
    submitForm: function () {
      //   try {
      //     arr.forEach(function (value, index, array) {
      //       this.params.details.forEach((e, i) => {
      //         if (i == 1) {
      //           // break;
      //         }
      //       });
      //     });
      //   } catch (e) {
      //     if (e.message !== "Stop Iteration") throw e; // 只捕获我们的异常，其他异常继续抛出
      //   }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //   return;
          console.log("111");
          if (this.form.id != undefined) {
            console.log("222");
            editDelivery(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("submitForm");
            });
          } else {
            console.log("333");
            addDelivery(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("submitForm");
            });
          }
        }
      });
    },
  },
};
</script>
    